<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: inline-block;
				width: 100px;
				height: 100px;
				background: blue;
				border: 1px solid black;
			}
			.s1{
				margin-right: 20px;
			}
			.s2{
				margin-left: 10px;
			}
			
			.box1{
				width: 100px;
				height: 100px;
				background: red;
				border: 1px solid black;
				margin-bottom: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				border: 1px solid black;
				margin-top: 50px;
			}
			
		</style>
	</head>

	<body>
		<!-- 
			外边距合并现象
			1.在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的;
			
			2.在水平方向上不会发生合并现象;		 
		 -->
		<div class="box1"></div>
		<div class="box2"></div>
		
		
		<span class="s1">我是span</span><span class="s2">我是span</span>
		
	</body>
</html>
